<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml :data="pageData" @onCommand="handleCommand" ref="listTpml"></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			<upleve-dialog @addSucess="refresh" ref="uplevedialog"></upleve-dialog>
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import listTpml from "@/view/components/listTmpl"
import { getInstStatus } from '@/service/swagger/AcAppInstController';
import { destroy, start, stop , deleteSL , rollback } from "@/service/swagger/InstanceController";
import { appStatusFilter } from '@/filters/status/index';
import { hostipFilter } from '@/filters/type/index';
import { listenner } from "@/utils/statuslistener";
import { checkStatus } from '@/utils/common.js'
import upleveDialog from '@/view/components/dialog/upLeveDialog'
export default {
	components: {
		listTpml,
		upleveDialog,
	},
	data() {
		return {
			pageData: {
				pageTitle: "应用实例",
				id: this.$route.query.id,
				filterOption: [
					{
						label: "名称", // label名
						paramsName: "instName", // 出参name值
						defaultValue: this.$route.query.name? this.$route.query.name : "", // 出参默认值
						componentsName: "nameInput", // 组件名
					},
					{
						label: "状态", // label名
						paramsName: "status", // 出参name值
						defaultValue: this.$route.query.status||this.$route.query.status==0 ? this.$route.query.status : "", // 出参默认值
						componentsName: "shiliStatusSelect", // 组件名
					},
					{
						label: "类型", // label名
						paramsName: "deployType", // 出参name值
						defaultValue: this.$route.query.deployType||this.$route.query.deployType==0 ? this.$route.query.deployType : "", // 出参默认值
						componentsName: "bushuTypeSelect", // 组件名
					}
				],
				// 列表table 设置
				listOption: {
					// 列表api
					listApi: {
						url: "/appcloud-data/api/appInst/getAppInstList",
						type: "POST",
						params: {
							templateId: this.$route.query.id,
							templateType: 1,
						}
					},
					// 表头设置
					header: [{
						label: "实例名称",
						width: "200",
						propName: "instName",
						align: "left",
					}, {
						label: "主机IP",
						width: "150",
						propName: "hostsInfo",
						html: (row) => {
							return  hostipFilter(row.hostsInfo)
						},
					}, {
						label: "版本号",
						width: "",
						propName: "appVersion",
					},{
						label: "部署类型",
						width: "",
						html:(row)=>{
							if(row.deployType == 1){
								return `<span>容器</span>`
							}else{
								return `<span>裸应用</span>`
							}
						}
					}, {
						label: "应用类型",
						width: "",
						propName: "appType",
					},
					{
						label: "应用名",
						width: "",
						propName: "appName",
					},
					{
						label: "创建时间",
						width: "180",
						propName: "createTime",
					}, {
						label: "状态",
						width: "",
						propName: "status",
						html: (row) => {
							return appStatusFilter(row.status, row.expectStatus)
						},
					}, {
						label: "操作",
						width: "140",
						btns: [
							{
								label: "详情",
								commandName: "/sl/yydetail"
							},
						],
						btnGroups: [
							{
								label: "升级",
								commandName: "update",
								show: (row) => {
									return row.status == 1 && row.upgrade == 1 ;//实际状态是运行中
								}
							},
							{
								label: "回滚",
								commandName: "rollBack",
								show: (row) => {
									return row.rollback == 1 && row.status == 1 ;//实际状态是运行中
								}
							},
							{
								label: "启动",
								commandName: "start",
								show: (row) => {
									return row.status == 2;//实际状态是已停止
								}
							},
							{
								label: "停止",
								commandName: "stop",
								show: (row) => {
									return row.status == 1;//实际状态是运行中
								}
							},
							{
								label: "销毁",
								commandName: "destory",
								show: (row) => {
									return row.status == 2;//实际状态是已停止
								}
							}, {
								label: "删除",
								commandName: "delete",
								show: (row) => {
									return row.status == 4;//实际状态是异常
								}
							},
							{
								label: "远程连接",
								commandName: "ycConncet",
								show: (row) => {
									return row.status == 1 && row.deployType  == 1;//实际状态是运行中
							}
							},{
								label:"克隆",
								commandName:"clone",
								show:(row) => {
									return row.deployType == 2 && (row.appType == 'tomcat8' || row.appType == 'nginx')
								}
							}]
					}]
				}
			}
			}
			},
			methods: {
				handleCommand(command, row, index) {
					if (command && this[command]) {
						this[command](row, index)
					} else {
						this.$router.push({
							path: command,
							query: {
								appType: 'yingyong',
								id: row ? row.instId : '',
								deploy: row.deployType,
							}
						})
					}
				},
				refresh() {
					this.$refs.listTpml.search();
				},
				// 启动
				start(row) {
					this.$confirm("确定启动该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							start({ id: row.instId }).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
								}
							})
						})
				},
				// 停止
				stop(row) {
					this.$confirm("确定停止该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							stop({ id: row.instId }).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
								}
							})
						})
				},
				// 销毁
				destory(row) {
					this.$confirm("确定销毁该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							destroy({ id: row.instId }).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
								}
							})
						})
				},
				// 删除
				delete(row) {
					this.$confirm("确定删除该实例？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							deleteSL(row.instId).then(ret => {
								if (ret && ret.code == 0) {
									this.refresh()
									this.$message({ showClose: true, message: '删除成功！', type: 'success' })
								}
							})
						})
				},
				listLoaded(tableData) {
					let _this = this
					checkStatus(tableData, _this, appStatusFilter, getInstStatus);
				},
				update(row){
					this.$refs.uplevedialog.open().init(row)
				},
				rollBack(row){
					this.$confirm("销毁当前运行实例并回滚至上一版本？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						rollback({
							id : row.instId
						}).then(ret => {
							if (ret && ret.code == 0) {
								this.refresh()
								this.$message({ showClose: true, message: '请求成功，开始回滚！', type: 'success' })
							}
						})
					})
				},
				//远程连接
				ycConncet(row){
					var token = JSON.parse(window.sessionStorage.getItem('userInfo')).token
					var instId = row.instId
					var url = 'connect.html' + '?' + 'wsurl' + '=' + `ws://10.21.237.35:10020/token/${token}/initId/${instId}`
					console.log(url)
					window.open(url)
					// this.$router.push({
					// 	path:'/sl/rqconncet'
					// })
				},
				//克隆 
				clone(row) {
					this.$router.push({
						path:'yyclone',
						query:{
							id:row.templateId,
							instId:row.instId,
							deployType: 2
						}
					})
				}
			}
}
</script>

<style>
</style>